Что такое пайп (pipe) в Angular? Разница между чистыми и нечистыми пайпами?

В Angular пайп (pipe) является механизмом для преобразования данных в шаблоне компонента. Пайпы используются для форматирования, фильтрации и преобразования значений перед их отображением.

Пайпы имеют два типа: чистые (pure) и нечистые (impure). Давайте рассмотрим их подробнее:

  1. Чистые пайпы (pure pipes):
    • Чистые пайпы используются для преобразования данных, при этом они остаются неизменными, если входные значения не изменились.
    • Они имеют иммутабельный подход и должны быть безопасными для кэширования.
    • Если входные значения для чистого пайпа не изменяются, Angular не будет повторно вычислять результат преобразования, а будет использовать закэшированное значение.
    • Чистые пайпы обычно используются для простых операций форматирования, таких как дата, валюта или преобразование регистра.

Вот пример использования чистого пайпа для форматирования даты:

import { Component } from '@angular/core'

@Component({
	selector: 'app-example',
	template: ` <p>{{ currentDate | date }}</p> `
})
export class ExampleComponent {
	currentDate: Date = new Date()
}
  1. Нечистые пайпы (impure pipes):
    • Нечистые пайпы вызываются при каждом обновлении компонента, даже если входные значения не изменились.
    • Они не кэшируются и могут потреблять больше ресурсов.
    • Нечистые пайпы могут выполнять более сложные операции, такие как сортировка, фильтрация или асинхронные вызовы.

Вот пример использования нечистого пайпа для фильтрации элементов списка:

import { Component } from '@angular/core'

@Component({
	selector: 'app-example',
	template: `
		<ul>
			<li *ngFor="let item of items | filterPipe">{{ item }}</li>
		</ul>
	`
})
export class ExampleComponent {
	items: string[] = ['apple', 'banana', 'cherry', 'date']
}

import { Pipe, PipeTransform } from '@angular/core'

@Pipe({
	name: 'filterPipe',
	pure: false
})
export class FilterPipe implements PipeTransform {
	transform(items: string[]): string[] {
		// Логика фильтрации
		return items.filter((item) => item.startsWith('a'))
	}
}

Разница между чистыми и нечистыми пайпами важна при проектировании и оптимизации приложения. В целом, рекомендуется использовать чистые пайпы, если это возможно, чтобы избежать ненужных вычислений и улучшить производительность. Нечистые пайпы следует использовать с осторожностью и только в случаях, когда это необходимо для выполнения более сложных операций.